<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <p>一、jquery get()方法：请输入两个数字</p>
    <form action="/" method="get">
        a: <input type="text" id="a" name="a"> <br>
        b: <input type="text" id="b" name="b"> <br>
        <p>result: <span id='result'></span></p>
        <button type="button" id='sumGet'>提交</button>
    </form>
    <script>
        $(document).ready(function () {
            $("#sumGet").click(function () {
                var a = $("#a").val();
                var b = $("#b").val();
                $.get("/ajaxTest/sumGet/", {
                    'a': a,
                    'b': b,
                }, function (ret) {
                    $('#result').html(ret);
                    // alert(ret);
                })
            });
        });
    </script>

    <p>二、ajax发送数据</p>
    <input id='name' type='text' />
    {% csrf_token %}
    <input type='button' value='点击执行Ajax请求' onclick='DoAjax()' />
    <script type='text/javascript'>
        function DoAjax() {
            var data = new FormData();
            var temp = $('#name').val();
            var token = $('input[name=csrfmiddlewaretoken]').val();
            data.append("temp", temp);
            data.append('csrfmiddlewaretoken', token);
            $.ajax({
                url: '/ajaxTest/ajaxSend/',
                type: 'POST',
                data: data,
                processData: false,
                contentType: false,
                success: function (arg) {
                    console.log(arg);
                    var obj = jQuery.parseJSON(arg);
                    console.log(obj.status);
                    console.log(obj.msg);
                    console.log(obj.data);
                    $('#name').val(obj.msg);
                },
                error: function () {
                    console.log('failed')
                }
            });
        }
    </script>
    <br>

    <p>三、ajax get发送数据：请输入两个数字</p>
    a：<input type="text" id="i1"><br>
    b：<input type="text" id="i2"><br>
    <input type="button" value="提交" id="b1"><br>
    result：<input type="text" id="i3"><br>
    <script>
        $("#b1").on("click", function () {
            $.ajax({
                url: "/ajaxTest/sumAjax/",
                type: "GET",
                data: {
                    "i1": $("#i1").val(),
                    "i2": $("#i2").val()
                }, //object类型，键值形式的，可以不给键加引号
                success: function (data) {
                    $("#i3").val(data);
                }
            })
        })
    </script>
</body>

</html>